<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识库导入导出</title>
    <style>

        .import-export-page h1 {
            color: #2c3e50;
            margin-bottom: 0px;
        }

        .import-export-page .form-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 300px;
            /* 新增代码，让容器在页面中水平和垂直居中 */
            position: absolute;
            top: 23%;
            left: 50%;
            transform: translate(-50%, -50%);

        }

        .import-export-page form {
            text-align: center;
            display: flex; /* 使用flex布局 */
            gap: 10px; /* 元素间的间距 */
            width: 450px; /* 适当增大最大宽度，以适应一行布局 */
        }

        .import-export-page input[type="file"] {
            padding: 10px;
            flex: 1; /* 让文件选择框占据剩余空间 */
        }

        .import-export-page input[type="submit"],
        .import-export-page a,
        .import-export-page button {
            padding: 10px 15px;
            background-color: #2c3e50;
            color: white;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color .3s;
            border: none;
            cursor: pointer;
        }

        .import-export-page input[type="submit"]:hover,
        .import-export-page a:hover,
        .import-export-page button:hover {
            background-color: #34495e;
        }

        /* 为导出和清空按钮添加额外的上外边距 */
        .import-export-page a,
        .import-export-page button {
            margin-top: 20px;
        }
    </style>
    <script>
        window.onload = function() {
        console.log('import_knowledge page onload called');
            // 从父页面获取 loadPage 函数
            function loadPage(url) {
                if (window.parent && window.parent.loadPage) {
                    window.parent.loadPage(url);
                }
            }

            function confirmClearKnowledge() {
                console.log('confirmClearKnowledge called');
                if (confirm('确定要清空知识库吗？此操作不可恢复！')) {
                    loadPage('{{ url_for('clear_knowledge') }}');
                }
            }
        }
    </script>
</head>
<body class="import-export-page body" >
<center>
    <h1>知识库导入导出</h1>
    <div class="import-export-page form-container">
        <!-- 导入表单 -->
        <form action="{{ url_for('import_knowledge_from_excel') }}" method="post" enctype="multipart/form-data">
            <input type="file" name="excel_file" accept=".xlsx, .xls">
            <input type="submit" value="导入 Excel 文件">
        </form>
        <!-- 导出链接 -->
        <a href="{{ url_for('export_knowledge_to_excel') }}" onclick="loadPage(this.href); return false;">导出知识库到 Excel</a>
        <!-- 清空知识库按钮 -->
        <button onclick="confirmClearKnowledge();">清空知识库</button>
    </div>
    </center>
</body>
</html>
